import { Form, Button, Select, Input, Modal, message, Row, Col } from 'antd'
import { useState, useImperativeHandle } from 'react'
import { useStore } from '@/store'
import { http } from '@/utils'
import { dict_data } from '@/dict'
const { TextArea } = Input
const Addorupdatafactor = ((props) => {
  const { loginStore } = useStore()
  const [showModalOpen, setShowModalOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const [factorType, setFactorType] = useState(null)
  const [value1, setValue1] = useState(null)
  const [value2, setValue2] = useState(null)
  const [value3, setValue3] = useState(1)
  const [value4, setValue4] = useState(-1)
  const [title, setTitle] = useState(null)
  const [factorId, setFactorId] = useState(null)
  const factorTypeOpt = dict_data[1010].map(item => { return { label: item.dictName, value: item.dictCode } })
  const configModalOpenOk = () => {
    setShowModalOpen(false)
  }
  const configModalOpenCancel = () => {
    form.resetFields()
    setShowModalOpen(false)
  }

  // 父组件调用打开模态框
  useImperativeHandle(props.onRef, () => {
    return {
      openModalOpen: openModalOpen,
    }
  })
  const openModalOpen = (data) => {
    form.resetFields()
    console.log(data)
    setTitle(data.id ? '编辑因子' : '添加因子')
    setFactorType(data.type)
    setFactorId(data.id)
    if (data.type === 2) {
      for (let index = 0; index < data.tbFactorConfigExtendList.length; index++) {
        const element = data.tbFactorConfigExtendList[index]
        switch (index) {
          case 0:
            setValue1(element.factorTypeName)
            setValue3(element.factorType)
            break
          case 1:
            setValue2(element.factorTypeName)
            setValue4(element.factorType)
            break
          default:
            break
        }
      }
    } else {
      setValue1(null)
      setValue2(null)
      setValue3(1)
      setValue4(-1)
    }
    form.setFieldsValue({
      factorName: data ? data.factorName : '',
      factorType: data ? data.type : null,
      factorParam: data ? data.factorParam : '',
      mark: data ? data.mark : '',
    })
    setShowModalOpen(true)
  }


  /* 使用hooks 更新form组件 */
  const [form] = Form.useForm()
  const addOrUpdateFactorConfig = async (values) => {
    console.log({
      id: factorId,
      ...values,
      userId: loginStore.userId,
      tbFactorConfigExtends: [
        { factorType: value3, factorTypeName: value1 },
        { factorType: value4, factorTypeName: value2 }
      ]
    })
    setLoading(true)
    const res = await http.post('/alarm/deliversign/addOrUpdateFactorConfig', {
      id: factorId,
      ...values,
      userId: loginStore.userId,
      tbFactorConfigExtends: values.factorType === 2 ? [
        { factorType: value3, factorTypeName: value1 },
        { factorType: value4, factorTypeName: value2 }
      ] : null
    })
    setLoading(false)
    message.success(res.body)
    setShowModalOpen(false)
    props.changeConfigModal('child msg')
  }
  return (
    <>
      {/* forceRender Modal未弹出时强制渲染  处理form hooks 动态赋值问题 */}
      <Modal
        title={title}
        open={showModalOpen}
        onOk={configModalOpenOk}
        onCancel={configModalOpenCancel}
        footer={false}
        width={550}
      >
        <Form
          form={form}
          colon={false}
          validateTrigger={['onBlur', 'onChange']}
          onFinish={addOrUpdateFactorConfig}
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 16 }}
          initialValues={{}}
          style={{ maxWidth: 550, }}
        >
          <Form.Item
            label="因子名称"
            name="factorName"
            rules={[
              {
                required: true,
                message: '请输入因子名称',
              }
            ]}>
            <Input
              allowClear
              placeholder='请输入因子名称'
              style={{ width: 260 }}
            />
          </Form.Item>
          <Form.Item
            label="因子类型"
            name="factorType"
            rules={[
              {
                required: true,
                message: '请选择因子类型',
              }
            ]}
          >
            <Select
              style={{ width: 260 }}
              allowClear
              placeholder="请选择"
              onChange={(value) => setFactorType(value)}
              options={factorTypeOpt}
            />
          </Form.Item>
          {
            factorType === 2 ? <>
              <Row style={{ marginBottom: '20px' }}>
                <Col span={7} style={{ textAlign: 'right', paddingRight: 8, lineHeight: '32px' }}>子项1</Col>
                <Col span={17}>
                  <Input
                    allowClear
                    value={value1}
                    onChange={(e) => setValue1(e.target.value)}
                    placeholder='请输入'
                    style={{ width: 150 }}
                  />
                  <span> 值 </span>
                  <Input
                    style={{ width: 85 }}
                    value={value3}
                    onChange={(e) => setValue3(e.target.value)} />
                </Col>
              </Row>
              <Row style={{ marginBottom: '20px' }}>
                <Col span={7} style={{ textAlign: 'right', paddingRight: 8, lineHeight: '32px' }}>子项2</Col>
                <Col span={17}>
                  <Input
                    allowClear
                    value={value2}
                    onChange={(e) => setValue2(e.target.value)}
                    placeholder='请输入'
                    style={{ width: 150 }}
                  />
                  <span> 值 </span>
                  <Input
                    style={{ width: 85 }}
                    value={value4}
                    onChange={(e) => setValue4(e.target.value)} />
                </Col>

              </Row>
            </> : ''
          }
          <Form.Item
            label="唯一标识"
            name="factorParam"
            rules={[
              {
                required: true,
                message: '请输入唯一标识',
              }
            ]}>
            <Input
              allowClear
              placeholder='请输入唯一标识'
              style={{ width: 260 }}
            />
          </Form.Item>
          <Form.Item label="备注" name="mark" >
            <TextArea
              placeholder='请输入备注'
              style={{ width: 260 }}
              rows={4} />
          </Form.Item>
          <Form.Item label=" ">
            <Button htmlType="submit" type="primary" loading={loading}>
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
})
export default Addorupdatafactor